<template>
  <div class="mainBox">
    <pageTitle Title="留言管理"></pageTitle>
    <div class="searchBar">
      <div class="left">
        <el-form :inline="true" :model="searchParam" ref="formRef">
          <el-form-item label="时间" prop="time">
            <el-date-picker
              v-model="searchParam.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item props="content">
            <el-input v-model="searchParam.content" placeholder="请输入内容">
              <template #prepend>
                <el-select
                  v-model="searchParam.type"
                  placeholder="关键词"
                  style="width: 115px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitForm">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="tableBar">
      <MyTable :tableData="tableData">
        <el-table-column
          type="index"
          width="100"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="openid" label="openid" align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column prop="content" label="内容" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column prop="state" label="状态" align="center">
          <template #default="scope">
            <el-tag class="ml-2" type="success" v-if="scope.row.state == 1"
              >已处理</el-tag
            >
            <el-tag class="ml-2" type="danger" v-else>未处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleMessage(scope.$index, scope.row)"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </MyTable>
    </div>

    <HandleMessage
      v-model:show="visible"
      :id="messageId"
      :state="messageState"
      @updateList="handleUpdateList"
    />
  </div>
</template>

<script setup>
import { getMsgList } from "@/Api/pc";
import HandleMessage from "./components/HandleMessage/index.vue";
const formRef = ref();
const visible = ref(false);
const messageId = ref("");
const messageState = ref("");
const searchParam = reactive({
  time: [],
  type: "1",
  content: "",
});

const options = [
  {
    value: "1",
    label: "关键词",
  },
  {
    value: "2",
    label: "电话",
  },
];
const handleUpdateList = () => {
  const params = {
    startTime: searchParam.time[0],
    endTime: searchParam.time[1],
    type: searchParam.type,
    content: searchParam.content,
  };
  getDataSource({ ...params });
};
const getDataSource = async (params = {}) => {
  const response = await getMsgList(params);
  const { code, obj } = response;
  if (code === 0) {
    tableData.value = obj;
  }
};
const tableData = ref([]);
const handleSubmitForm = () => {
  const params = {
    startTime: searchParam.time[0],
    endTime: searchParam.time[1],
    type: searchParam.type,
    content: searchParam.content,
  };
  getDataSource({ ...params });
};

const handleMessage = (_, row) => {
  const { id, state } = row;
  messageId.value = id;
  messageState.value = state;
  visible.value = true;
};

onMounted(() => {
  getDataSource();
});
</script>

<style lang="scss" scoped>
.searchBar {
  display: flex;
  justify-content: space-between;
}

@import "@/assets/css/mycss.css";
</style>
